import styled from "styled-components";

export const TabBarContainer = styled.div`
    position: fixed;
    display: flex;
    width: 100vw;
    /* height: 22.4px; */
    bottom: 0px;
    background-color: white;
    z-index: 10;
    justify-content: space-around;
` 
export const TabItem = styled.div`
    position: relative;
    margin-top:2px;
    -webkit-tap-highlight-color:transparent;
    & a {
    text-decoration:"none";
    font-size:14px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
        & img{  
            width: 30px;  
            height: 30px;
        }
    }
    .number{
        text-align: center;
        width: 20px;
        height: 20px;
        position: absolute;
        top: -10px;
        right: -10px;
        font-size: 16px;
        color: #fff;
        background-color:#ff0000 ;
        border:1px solid #ec564b;
        border-radius: 10px;
        padding:1px;
    }
`
